<template>
  <div class="hedao" v-if="hdsqData.length>1">
    <div class="hedao_top">
      <div class="hedao_top_text">
        河道三期勘界
      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableDatas"
        border
        height="340"
        style="width: 100%; margin-top: 10px;"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column
          align="center"
          label="序号"
          type="index"
          sortable
          min-width="80"
        >
        </el-table-column>
        <el-table-column
          prop="hdName"
          min-width="40px"
          align="center"
          label="河道名称"
        >
        </el-table-column>
        <el-table-column
          prop="len"
          align="center"
          min-width="40px"
          label="长度(m)"
        >
        </el-table-column>
        <el-table-column
          prop="ha"
          align="center"
          min-width="40px"
          label="河道范围(ha)"
        >
        </el-table-column>
        <el-table-column
          prop="haManage"
          align="center"
          min-width="40px"
          label="河道管理范围(ha)"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      tableDatas: [
        {
          hdName: "河道",
          len: 100,
          ha: 100.242,
          haManage: 120.52,
        },
      ],
      all: [
        {
          hdName: "合计",
          len: 0,
          ha: 0,
          haManage: 0,
        },
      ],
    };
  },
  computed: {
    ...mapState("Sjsx", ["hdsqData"]),
  },
  methods: {
    // 获取河道三期勘界的数据
    getHdsqData() {
      console.log(this.hdsqData, "获取河道三期的数据(详情表)");
      // let hdsqList = ['hdName','len','ha','haManage']
      // 判断如果数据为空时，显示暂无数据
      this.hdsqData.forEach((item) => {
        this.all[0].len += Number(item.len);
        this.all[0].ha += Number(item.ha);
        this.all[0].haManage += Number(item.haManage);
        for (let a in item) {
          console.log(item[a], "item.a的值");
          if (item[a] == null || item[a] == 0) {
            item[a] = "暂无数据";
          }
        }
        // if(item.haManage == null || item.haManage == 0){
        //   item.haManage = "暂无数据"
        // }
      });

      this.all[0].len = this.all[0].len.toFixed(1);
      this.all[0].ha = this.all[0].ha.toFixed(3);
      this.all[0].haManage = this.all[0].haManage.toFixed(3);
      console.log(this.all, "this.all的值");
      this.hdsqData.push(this.all[0]);
      this.tableDatas = this.hdsqData;
    },
  },
  mounted() {
    this.getHdsqData();
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table,
// .el-table__body-wrapper{
//   height: 340px !important; 
// }
::v-deep .el-table__expanded-cell {
  background-color: rgba(14, 85, 238, 0.109) !important;
  border: 1px solid #466393cc;
}
::v-deep .el-table__body-wrapper {
  height: 270px !important;
}
// 滚动条的宽度
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    rgba(131, 166, 166, 0.1),
    rgba(131, 166, 166, 0.8),
    rgba(131, 166, 166, 0.1)
  );
}
// 滚动条里面的轨道(即背景颜色)
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: rgba(41, 71, 89, 0.4);
}
::v-deep .el-table__header th,
::v-deep .el-table__header tr {
  // background-color: #17B3A3;
  color: #fff;
}
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: rgba(251, 251, 251, 0.109) !important;

  border: 0px solid #466393cc;
}
::v-deep .el-table__expand-icon {
  color: #fff;
}
/* 去掉中间数据的分割线 */
::v-deep .el-table__row > td {
  // border: 1px solid #466393cc;
}
/* 去掉上面的线 */
::v-deep .el-table th.is-leaf {
  // border: 1px solid #466393cc;
}
/* 去掉最下面的那一条线 */
::v-deep .el-table::before {
  height: 0px;
}
::v-deep .el-table__body tr {
  background-color: transparent !important;

  border: 1px solid #466393cc;
}
// .el-table__body tr:hover > td {
//     background-color: transparent !important;

//     border: 0px solid #134087;
// }
::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #466393cc;
  border-left: 1px solid #466393cc;
  font-size: 18px;
}
::v-deep .el-table--border th.el-table__cell.gutter:last-of-type {
  border-bottom: 1px solid #466393cc;
}
::v-deep .el-table--border .el-table__cell,
::v-deep
  .el-table__body-wrapper
  .el-table--border.is-scrolling-left
  ~ .el-table__fixed {
  border-right: 0px solid #ebeef5;
  color: #fff;
}
::v-deep .el-table--border::after,
::v-deep .el-table--group::after,
::v-deep .el-table::before {
  content: "";
  position: absolute;
  background-color: #466393cc;
  z-index: 1;
}
::v-deep .el-table th.el-table__cell > .cell {
  padding-left: 5px;
  padding-right: 5px;
}
.hedao {
  margin-bottom: 35px;
  .hedao_top {
    background: url("../../../../../assets/images/home/top.png");
    background-size: cover;
    margin-top: 10px;
    .hedao_top_text {
      padding-left: 16px;
      font-family: OPPOSans;
      font-style: normal;
      font-weight: normal;
      font-size: 20px;
      line-height: 24px;
      color: #ffffff;
    }
  }
}
</style>
